<!-- 
/**
 * 
 * @authors garyzyz (zhouyouzhao@yeah.net)
 * @date    2016-12-06 01:19:06
 * @version $Id$
 */

 -->
<template>
  <section class="spots-group">
    <ul class="item-ul" v-if="spots">
      <li class="item" v-for=" item in spots">
        <a :href="'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxfe002090e7dcbd3c&redirect_uri=http%3A%2F%2Fpiao.pandauu.com%2Fwx_user_info.php&response_type=code&scope=snsapi_userinfo&state=shuttle_' + item.id + '#wechat_redirect'">
          <div class="thumb-wrapper">
            <img class="thumb" :src="'/uploads/' + item.thumb">
          </div>
          <div class="info">
            <p class="spots-title elli-3">{{item.title}}</p>
            <div class="spots-label">
              <p>￥<span class="price">{{item.price}}</span>起</p>
              <p class="label-wrapper">
                <span class="label">{{item.category_n}}</span>
              </p>
            </div>
          </div>
        </a>
      </li>
    </ul>
  </section>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      spots: {
        type: Array
      },
      rootUrl: {
        type: String
      }
    }
  };
</script>

<style lang="less" rel="stylesheet/less">
  .spots-group{
    .item{
      margin-bottom: 10px;
      background-color: #fff;
      box-shadow: rgba(103, 98, 98, 0.57) 0px 1px 4px;
      & > a{
        display: block;
        display: flex;
      }
      .thumb-wrapper{
        flex: 0 0 130px;
        height: 130px;
        .thumb{
          width: 100%;
          height: 100%;
        }
      }
    }
    .info{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 0;
      padding: 17px 10px 9px 12px;
      .spots-title{
        color: #5f5f5f;
        font-size: 18px;
        line-height: 20px;
      }
      .spots-label{
        display: flex;
        justify-content: space-between;
        color: #498dff;
        font-size: 12px;
        .price, .label-wrapper{
          flex: 1;
        }
        .price{
          font-size: 20px;
          font-weight: bold;
        }
        .label-wrapper{
          text-align: right;
        }
        .label{
          display: inline-block;
          font-size: 15px;
          color: #fff;
          padding-left: 9px;
          padding-right: 9px;
          height: 24px;
          line-height: 25px;
          border-radius: 12px;
          background-color: #498dff;
        }
      }
    }
  }
</style>
